import React, { Component } from 'react';
import { Card, Input, Button, Select, Icon, Table ,message} from "antd"
import MyButton from "../../../components/button/MyButton"
import { ProductGet, SearchProduct ,RemoveProduct} from "../../../api/index"

const { Option } = Select;
class ProductManager extends Component {
    state = {
        products: [],  //存储商品的数组
        limit: 4,  //每页请求的商品数据条数
        loading: true,
        total: 0, //总的数据量  
        serachType: "name",  //存储搜索类型
        keyWord: "",  //搜索关键字
        page:1, //存储当前的页码
    }

    componentDidMount() {
        this.getProduct({ page: 1, limit: this.state.limit })
    }

    handleradd = () => {
        this.props.history.push("/admin/product/add")
    }

    getProduct = async (args) => {
        const { serachType, keyWord, page, limit } = args
        // console.log(serachType);
        let result = null;
        if (serachType) {
            result = await SearchProduct({
                [serachType]: keyWord,
                page,
                limit
            })
        } else {
            result = await ProductGet(args);
        }

        const { products, total } = result;
        this.setState({
            products,
            loading: false,
            total
        })
    }

    removeproduct =async (product) => {
        const result=await RemoveProduct(product)
        const {status,msg} =result;

        const {total,limit,page}=this.state;
        // 计算删除后的页码数
        const currentPage=Math.ceil((total-1)/limit)<page?page-1:page
        
        if(status){
            message.success(msg);
            this.getProduct({ page:currentPage, limit:limit })
        }else{
            message.error(msg);
        }
    }


    render() {
        const { serachType, keyWord, limit, products, total } = this.state
        const title = (
            <span>
                <Select defaultValue={serachType} style={{ width: 120 }} onChange={(value) => { this.setState({ serachType: value }) }}>
                    <Option value="name">按名称搜索</Option>
                    <Option value="intro">按简介搜索</Option>
                </Select>
                <Input style={{ width: 220, marginLeft: 15, marginRight: 15 }} value={keyWord} onChange={(e) => { this.setState({ keyWord: e.target.value }) }}></Input>
                <Button type="primary" onClick={() => { this.getProduct({ serachType, keyWord, page: 1, limit }) }}>搜索</Button>
            </span>
        )
        const extra = (
            <Button type="primary" onClick={this.handleradd}>
                <Icon type="plus"></Icon>
                添加商品
            </Button>
        )

        const columns = [
            {
                title: '商品名称',
                dataIndex: 'proName',
                key: '_id',
            },
            {
                title: '商品简介',
                dataIndex: 'proIntro',
                key: 'proIntro',
            },
            {
                title: '商品价格',
                dataIndex: 'proPrice',
                key: 'proPrice',
                render: (proPrice) => (
                    <span>￥{proPrice}</span>
                )
            },
            {
                title: '操作',
                key: 'opration',
                width: 300,
                render: (product) => (
                    <span style={{ textAlign: "center", display: "inlineBlock" }}>
                        <MyButton onClick={() => {
                            this.props.history.push({
                                pathname: "/admin/product/add",
                                product
                            })
                        }}>修改</MyButton>
                        <MyButton style={{ marginRight: 20, marginLeft: 20 }} onClick={() => {
                            this.props.history.push({
                                pathname: "/admin/product/info",
                                product
                            })

                        }}>详情</MyButton>
                        <MyButton onClick={() => { this.removeproduct(product) }}>删除</MyButton>
                    </span>
                )
            },
        ];


        return (
            <div>
                <Card title={title} extra={extra} style={{ borderBottom: "none" }}>
                    <Table
                        dataSource={products}  //数据源
                        columns={columns} //每列的信息
                        rowKey="_id"
                        bordered

                        loading={this.state.loading}
                        pagination={{  //配置分页器
                            defaultPageSize: limit,
                            total: total,
                            onChange: (page) => {
                                this.setState({
                                    page
                                },()=>{
                                    this.getProduct({ page, limit })
                                }) 
                            }
                        }}
                    />
                </Card>
            </div>
        );
    }
}

export default ProductManager;